<template>
  <div class="login-log-content">
    <div class="query-content">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="用户名称">
          <el-input v-model="formInline.userName" clearable />
        </el-form-item>
        <el-form-item label="登录时间">
          <el-date-picker
            v-model="pickTimes"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="handleTimeChange"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="queryButton" @click="onSubmit"
            >查询</el-button
          >
          <el-button type="primary" class="resetButton" @click="onReset"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="table-content">
      <!--      <el-button class="addButton" type="primary">-->
      <!--        <el-icon><Download /></el-icon>-->
      <!--        导出-->
      <!--      </el-button>-->
      <div class="table">
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column
            label="用户名称"
            prop="userName"
            show-overflow-tooltip
          />
          <el-table-column
            label="用户手机号码"
            show-overflow-tooltip
            prop="userPhone"
          />
          <el-table-column prop="deptName" label="用户所属部门" />
          <el-table-column label="ip" prop="requestIp" show-overflow-tooltip />
          <el-table-column prop="loginTime" label="访问时间">
            <template #default="scope">
              {{
                scope.row.loginTime
                  ? formatDate(
                      new Date(scope.row.loginTime),
                      'YYYY-MM-DD HH:mm:ss'
                    )
                  : ''
              }}
            </template>
          </el-table-column>
          <el-table-column prop="result" label="登录状态" show-overflow-tooltip>
            <!--            <template #default="scope">-->
            <!--              <span v-if="scope.row.menuState == '1'">在线</span>-->
            <!--              <span v-else style="color: #ff455f">离线</span>-->
            <!--            </template>-->
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        layout="slot, prev, pager, next"
        :page-size="formInline.pageSize"
        :current-page="formInline.pageIndex"
        :total="total"
        @current-change="handlePageChange"
      >
        <template #default> 共{{ total }}条记录 </template>
      </el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { formatDate } from '@/utils'
import { queryLoginLog } from '@/api/back-management/login-log'

const pickTimes = ref<[Date, Date]>()

const formInline = reactive({
  pageIndex: 1,
  pageSize: 15,
  userName: '',
  start: '',
  end: '',
})

const total = ref(0)

const tableData = ref<any[]>([])

const onSubmit = () => {
  formInline.pageIndex = 1
  getLogList()
}

const onReset = () => {
  formInline.pageIndex = 1
  formInline.userName = ''
  formInline.start = ''
  formInline.end = ''
  pickTimes.value = undefined
  getLogList()
}

const handlePageChange = (index: number) => {
  formInline.pageIndex = index
  getLogList()
}

const multipleSelection = ref<string[]>([])

const handleTimeChange = (val: string[]) => {
  if (val) {
    formInline.start = formatDate(new Date(val[0]), 'YYYY-MM-DD HH:mm:ss')
    formInline.end = formatDate(new Date(val[1]), 'YYYY-MM-DD HH:mm:ss')
  } else {
    formInline.start = ''
    formInline.end = ''
  }
}
const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val
}

const getLogList = () => {
  queryLoginLog(formInline).then((res) => {
    if (res.success) {
      const { data } = res
      tableData.value = data.list
      total.value = data.count
    }
  })
}

onMounted(() => {
  getLogList()
})
</script>

<style lang="scss" scoped>
.login-log-content {
  width: 100%;
  height: calc(100% - 27px);
  background-color: white;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
  border-radius: 2px;

  .query-content {
    padding-left: 20px;
    width: 100%;
    height: 62px;
    line-height: 62px;
    border-bottom: 1px solid #eeeff5;

    :deep(.el-form) {
      .el-form-item {
        margin-bottom: 0;

        .resetButton {
          width: 80px;
          height: 32px;
          color: #28b1e4;
          background: #ffffff;
          border: 1px solid #28b1e4;
          border-radius: 2px;
        }

        .queryButton {
          width: 80px;
          height: 32px;
          background: #28b1e4;
          border-radius: 2px;
        }
      }
    }
  }

  .table-content {
    width: 100%;
    height: calc(100% - 63px);

    .addButton {
      margin-left: 20px;
      margin-top: 14px;
      margin-bottom: 14px;
      width: 100px;
      height: 32px;
      background: #28b1e4;
      border-radius: 2px;
      border: none;
      padding: 0;
    }

    .table {
      margin-top: 12px;
      width: 100%;
      padding: 0 18px;
      height: calc(100% - 77px - 28px);
      overflow-y: auto;

      .userName {
        .item {
          margin-left: 6px;
        }
        :deep(.el-icon) {
          vertical-align: sub;

          .svg-icon {
            svg {
              width: 16px;
              height: 16px;
              color: #28b1e4;
            }
          }
        }
        :deep(.el-badge__content) {
          width: 12px;
          height: 13px;
          transform: translateY(85%) translateX(148%);
        }
      }

      :deep(.el-table__row--striped) {
        background: #f7f9fb;
      }
    }

    .el-pagination {
      margin-top: 25px;
      justify-content: end;
      margin-right: 18px;
    }
  }
}
</style>
